<template>
  <el-dialog
    title="从资源库中选择图片"
    :visible.sync="dialogVisible"
    width="1000px"
    :close-on-click-modal="false"
    :lock-scroll="false"
    append-to-body
  >
    <div class="img-wrap">
      <el-input
        placeholder="请输入内容"
        v-model="listQuery.oldName"
        class="input-with-select"
        style="width: 50%"
        @input="
          listQuery.page = 1
          getList()
        "
      >
        <el-button
          slot="append"
          icon="el-icon-search"
          @click="
            listQuery.page = 1
            getList()
          "
        ></el-button>
      </el-input>
      <el-table :data="tableData" stripe style="width: 100%" size="mini">
        <el-table-column prop="sysAttachment" label="缩略图" width="100">
          <template slot-scope="scope">
            <div class="img-box">
              <img class="thumbnail" :src="scope.row.httpUrl" />
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="oldName" label="资源名称" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="attrSize" label="资源大小" width="100">
          <template slot-scope="scope">
            {{ scope.row.attrSize | fileSizeFilter }}
          </template>
        </el-table-column>
        <el-table-column prop="attrSuffixStr" label="资源类型" width="100">
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="150">
        </el-table-column>
        <el-table-column label="操作" width="160">
          <template slot-scope="{ row }">
            <el-button-group>
              <el-button type="success" size="mini" @click="handleLook(row)">
                预览
              </el-button>
              <el-button type="primary" size="mini" @click="handleSelect(row)"
                >选择</el-button
              >
              <!-- <el-button
                type="primary"
                size="mini"
                @click="handleSelectAndCropper(row)"
                >选择并裁切</el-button
              > -->
            </el-button-group>
          </template>
        </el-table-column>
        <div slot="empty" class="emptyBg">
          <el-empty :image-size="200"></el-empty>
        </div>
      </el-table>
      <Pagination
        v-show="parseInt(pageObj.count) > 0"
        :total="parseInt(pageObj.count)"
        @change="getList"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.limit"
      />
      <Preview />
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { tbSysAttachmentQuery } from '@/api/http'
import Bus from '@/utils/bus.js'
export default {
  components: {
    Preview: () => import('@/components/resource/preview.vue'),
  },
  data() {
    return {
      dialogVisible: false,
      listQuery: {
        page: 1,
        limit: 10,
        isAll: 'N',
        attrSuffix: "'jpg', 'png'",
        oldName: '',
      },
      tableData: [],
      pageObj: {},
    }
  },
  mounted() {
    this.$bus.$on('selectImgFromLibrary', () => {
      this.listQuery = this.$options.data().listQuery
      this.getList()
    })
  },
  beforeDestroy() {
    this.$bus.$off('selectImgFromLibrary')
  },
  methods: {
    getList() {
      tbSysAttachmentQuery(this.listQuery).then((res) => {
        this.tableData = res.data.data
        this.pageObj = res.data
        this.dialogVisible = true
      })
    },
    //预览
    handleLook(row) {
      Bus.$emit('showPreview', row, this.tableData)
    },
    //选择
    handleSelect(row) {
      this.$emit('e-emit', row.httpUrl)
      this.dialogVisible = false
    },
    handleSelectAndCropper(row) {
      this.$bus.$emit('showCropperDialog', row.httpUrl)
      this.dialogVisible = false
    },
  },
}
</script>
<style scoped lang="scss">
.img-wrap {
  min-height: 300px;
  max-height: 500px;
  overflow-y: auto;
  overflow-x: hidden;
  .img-box {
    width: 40px;
    height: 20px;
    border: 1px solid #ddd;
    img {
      display: block;
      width: 100%;
      height: 100%;
    }
  }
}
</style>